<!DOCTYPE html>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<html>
<head> 	
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta charset="utf-8">

  <script src="./common-resources/resources/scripts/lib/json2.js"></script>
  <script src="./common-resources/resources/scripts/lib/jquery.js"></script>
  <script src="./common-resources/resources/scripts/lib/underscore.js"></script>
  <script src="./common-resources/resources/scripts/lib/backbone.js"></script>
  
  <script language="Javascript">
$(function() {

	var Product = Backbone.Model.extend({
	    defaults: function() {
	        return {
		    id:   "default_id",
		    category: "default category",
		    displayName: "default displayName",
		    description: "default description"
		    }
	    }
	});

	var ProductList = Backbone.Collection.extend({
		url: "listProducts2",
		model: Product,
		comparator: 'id'
	});

	productList = new ProductList();
	
	_.templateSettings = {
		    interpolate: /\<\@\=(.+?)\@\>/gim,
		    evaluate: /\<\@([\s\S]+?)\@\>/gim,
		    escape: /\<\@\-(.+?)\@\>/gim
    };

	var ProductView = Backbone.View.extend({
		tagName: "li",

		template: _.template($('#product-template').html()),

		events: {
			"click .destroy" : "clear"
		},

		initialize: function() {
		    this.listenTo(this.model, 'change', this.render);
		    this.listenTo(this.model, 'destroy', this.remove);
		},

		render: function() {
			this.$el.html(this.template(this.model.toJSON()));
			return this;
		},

		clear: function() {
		    this.model.destroy();
	        },



	});

	var AppView = Backbone.View.extend({
	  	 el: $("#productApp"),

		 events: {
			 "click .listProduct" : "listProducts",
			 "click .resetList" : "resetList",
			 "click .clearList" : "clearList",
	         },
		 
		 initialize: function() {
			 this.listenTo(productList, 'add', this.addOne);
			 this.listenTo(productList, 'reset', this.addAll);
			 this.listenTo(productList, 'all', this.render);
		 	 productList.fetch();
		 	 /*
		 	 productList.add(
			 [
			 new Product({id:"p3", category: "c3", displayName:"product 3 name", description: "description 3"}),
			 new Product({id:"p2", category: "c2", displayName:"product 2 name", description: "description 2"}),
			 new Product({id:"p1", category: "c1", displayName:"product 1 name", description: "description 1"})
			 ]
			 );*/
		 },

		 render: function() {
			 console.log("render AppView");
		 },

		 addOne: function(product) {
			 var view = new ProductView({model: product});
			 this.$('#productDiv').append(view.render().el);
		 },

		 addAll: function() {
			 productList.each(this.addOne, this);
		 },

	     listProducts: function() {
			 productList.add(
			 [
			 new Product({id:"p3444444666777888", category: "c3", displayName:"product 3 name", 

			     description: "description 3", searchKeywords: "searchKeywords", 
			     shoppingCart: {name: "sc3", image: {location: "www.baidu.com"}},
			     productImage: {image: "www.baidu.com"}
			 }),
			 new Product({id:"p22222", category: "c2", displayName:"product 2 name", 
			     description: "description 2", searchKeywords: "searchKeywords", 
			     shoppingCart: {name: "sc2", image: {location: "www.baidu.com"}},
			     productImage: {image: "www.baidu.com"}
			 })
			 ]
			 )
		 },

		 resetList: function() {
			 productList.reset(
			 [
			 new Product({id:"p3", name:"product 3 name"}),
			 new Product({id:"p4", name:"product 4 name"}),
			 new Product({id:"p0", name:"product 0 name"})
			 ]
			 
			 );

			 productList.sort();
		 },
		 
		 clearList: function() {
		     productList.reset();
		 }
	});

	var App = new AppView;

});
  </script>
</head>

<body>

<h1>
	List Products
</h1>

<P>  
<c:forEach var="product" items="${products}">
    <div>
        Product Display Name: <c:out value="${product.displayName}"/>
    </div>
</c:forEach>
</P>

      <div id="productApp">
       <button class="listProduct">List Product1</button>
       <button class="resetList">Reset List</button>
       <button class="clearList">Clear List</button>
       <div id="productDiv">
       </div>
      </div>

  <script type="text/template" id="product-template">
    <div class="view">
      <label><@- id @></label> -
      <label><@- category @></label> -
      <label><@- displayName @></label> -
      <label><@- description @></label> <br>
      <label><@- searchKeywords @></label> -
      <label><@- shoppingCart.name @></label> <br>
      <label><@- shoppingCart.image.location @></label> -
      <label><@- productImage.image.location @></label> -
      <button class="destroy">remove</button>
      <image style="background-image:url(<@- shoppingCart.image.location @>); <@- shoppingCart.image.cssStyle @>"/>
    </div>
  </script>
</body>

</html>

